<template>
    <div style="border:1px solid #eee;">
        <el-select v-model="val" :disabled="disabled"  style="width:100%;">
            <el-option v-for="item in options"
                :label="item.label"
                :value="item.value"
                :key="item.value"
            ></el-option>
        </el-select>
        <el-form-item :prop="otherField" v-if="showOther" style="width:100%;" >
            <div style="width:100%;display:flex;padding: 4px;">
                <label>{{otherLabel}}</label>
                <el-input type="text" :disabled="disabled" v-model="other" style="flex: 1;"></el-input>
            </div>
        </el-form-item>
    </div>
</template>

<script>

    export default{
        name:"MyOtherCombo",
        emits:["update:modelValue"],
        props:{
            modelValue:[Number, String],
            options:Array,
            otherValue:[Number, String],
            otherField:String,
            otherLabel:{
                type:String,
                default:"其他：",
            }, 
            formData: Object,
            disabled:Boolean,
        },
        data(){
            return{
                val:null,
                other:"",
            }
        },
        created(){
            this.setVal();
        },
        methods:{
            setVal(){
                this.val = this.modelValue;
                if(this.showOther){
                    this.other = this.formData[this.otherField] || "";
                }else{
                    this.other = "";
                }
            }
        },
        computed:{
            showOther(){
                return this.modelValue==this.otherValue;
            }
        },
        watch:{
            modelValue(){
                this.setVal();
            },
            options(){
                this.setVal();
            },
            formData(){
                this.setVal();
            },
            other(newVal){
                if(this.showOther){
                    this.formData[this.otherField]  = newVal;
                }
            },
            val(newVal){
                if(newVal!=this.otherValue){
                    this.other = "";
                }
                this.$emit("update:modelValue", newVal);
            }
        }
    }
</script>